<script setup lang="ts">
import leaderSelect from "./leaderSelect.vue";
import { message } from "@/utils/message";
import { addDialog } from "@/components/ReDialog";
import { ref, h } from "vue";
import ReCol from "@/components/ReCol";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import { EditPen } from '@element-plus/icons-vue'
import { deviceDetection } from "@pureadmin/utils";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: "",
    name: "",
    leader: null,
    leader_name: "",
    responsible_leader: null,
    responsible_leader_name: "",
    remark: "",
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

// 选择人员
const leaderSelectRef = ref()
function leaderSelectClick(text: string, leader: number, leader_name: string) {
  addDialog({
    title: "选择人员",
    props: {
      formInline: {
        text: text ?? "",
        leader: leader ?? null,
        leader_name: leader_name ?? "",
      }
    },
    width: "800px",
    draggable: true,
    fullscreen: deviceDetection(),
    fullscreenIcon: true,
    closeOnClickModal: false,
    contentRenderer: () => h(leaderSelect, { ref: leaderSelectRef, formInline: null } ),
    beforeSure: (done, { options }) => {
      const curData = options.props.formInline
      if (curData.leader) {
        if (curData.text == 'leader') {
          newFormInline.value.leader = curData.leader
          newFormInline.value.leader_name = curData.leader_name
        } else {
          newFormInline.value.responsible_leader = curData.leader
          newFormInline.value.responsible_leader_name = curData.leader_name
        }
        done()
      } else {
        message(`请选择人员！`, { type: "error" });
      }
    }
  });
}

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="120px"
  >
    <el-row :gutter="30">
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="部门名称:" prop="name">
          <el-input
            v-model="newFormInline.name"
            clearable
            maxlength="50"
            placeholder="请输入"
            show-word-limit
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="负责人:" prop="director">
          <el-input
            class="readonlyInput"
            v-model="newFormInline.leader_name"
            placeholder="未设置，去设置"
            :suffix-icon="EditPen"
            readonly
            @click="leaderSelectClick('leader', newFormInline.leader, newFormInline.leader_name)"
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="分管领导:" prop="responsible_leader">
          <el-input
            class="readonlyInput"
            v-model="newFormInline.responsible_leader_name"
            placeholder="未设置，去设置"
            :suffix-icon="EditPen"
            readonly
            @click="leaderSelectClick('responsible_leader', newFormInline.responsible_leader, newFormInline.responsible_leader_name)"
          />
        </el-form-item>
      </re-col>
      <re-col :value="24" :xs="24" :sm="24">
        <el-form-item label="备注:" prop="remark">
          <el-input
            v-model="newFormInline.remark"
            clearable
            maxlength="200"
            placeholder="请输入"
            show-word-limit
            type="textarea"
          />
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>

<style lang="scss" scoped>
:deep(.readonlyInput .el-input__wrapper) {
  background-color: #efefef;
}
:deep(.readonlyInput .el-input__inner) {
  cursor: pointer;
}
</style>